import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';
import 'package:flutter_color_plugin/flutter_color_plugin.dart';
import 'dart:math' as math;

class HeroStart2 extends StatefulWidget {
  @override
  _HeroStartState createState() => _HeroStartState();
}

class _HeroStartState extends State<HeroStart2> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: RadialExpansionDemo(),
    );
  }
}

class PhotoHero extends StatelessWidget {
  const PhotoHero({Key key, this.value, this.onTap, this.width})
      : super(key: key);
  final String value;
  final VoidCallback onTap;
  final double width;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
        width: width,
        child: Material(
          color: ColorUtil.color("#20000000"),
          child: InkWell(
              onTap: onTap,
              child: LayoutBuilder(
                builder: (context, size) {
                  return Image.network(
                    value,
                    fit: BoxFit.contain,
                  );
                },
              )),
        ));
  }
}

class RadialExpansion extends StatelessWidget {
  const RadialExpansion({Key key, this.maxRadius, this.child})
      : clipRectSize = 2.0 * (maxRadius / math.sqrt2),
        super(key: key);
  final double maxRadius;
  final clipRectSize;
  final Widget child;

  @override
  Widget build(BuildContext context) {
    return ClipOval(
      child: Center(
        child: SizedBox(
          width: clipRectSize,
          height: clipRectSize,
          child: ClipRect(
            child: child,
          ),
        ),
      ),
    );
  }
}

class RadialExpansionDemo extends StatelessWidget {
  static const double kMinRadius = 40;
  static const double kMaxRadius = 150;
  static const opacityCurve =
      const Interval(0.0, 0.75, curve: Curves.fastOutSlowIn);

  static RectTween _createRectTween(Rect begin, Rect end) {
    return MaterialRectCenterArcTween(begin: begin, end: end);
  }

  static Widget _buildPage(
      BuildContext context, String imageName, String description) {
    return Container(
      color: Colors.amberAccent,
      child: Center(
        child: Card(
          elevation: 10,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              SizedBox(
                width: kMaxRadius * 2,
                height: kMaxRadius * 2,
                child: Hero(
                    createRectTween: _createRectTween,
                    tag: imageName,
                    child: RadialExpansion(
                      maxRadius: kMaxRadius,
                      child: PhotoHero(
                        value: imageName,
                        onTap: () {
                          Navigator.of(context).pop();
                        },
                      ),
                    )),
              ),
              Text(
                description,
                style: TextStyle(fontWeight: FontWeight.bold),
                textScaleFactor: 3.0,
              ),
              const SizedBox(
                width: 20,
              )
            ],
          ),
        ),
      ),
    );
  }

  static Widget _buildHero(
      BuildContext context, String imageName, String description) {
    return Container(
      width: kMinRadius * 2,
      height: kMinRadius * 2,
      child: Hero(
          createRectTween: _createRectTween,
          tag: imageName,
          child: RadialExpansion(
            maxRadius: kMaxRadius,
            child: PhotoHero(
              value: imageName,
              onTap: () {
                Navigator.of(context).push(PageRouteBuilder(pageBuilder:
                    (BuildContext context, Animation<double> animation,
                        Animation<double> secondaryAnimation) {
                  return AnimatedBuilder(
                      animation: animation,
                      builder: (BuildContext context, Widget child) {
                        return Opacity(
                          opacity: opacityCurve.transform(animation.value),
                          child: _buildPage(context, imageName, description),
                        );
                      });
                }));
              },
            ),
          )),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("高级Hero"),
      ),
      body: Container(
        padding: EdgeInsets.all(30),
        alignment: FractionalOffset.bottomCenter,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[_buildHero(context, "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573401675497&di=638905bdbfb7faf1baad10b55df4f9ac&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F437658f08a68e1d24ea512b48b4a8cb7d808f3de25148-uBjU7Q_fw658", "这是狗"),
          _buildHero(context, "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573401712834&di=680e4ec8e48dbcf97137a84e0a54f479&imgtype=0&src=http%3A%2F%2Fimage.tupian114.com%2F20140606%2F00590818.jpg", "这是公鸡")
          ,_buildHero(context, "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573401712833&di=6a180991c77324e0371c16874eddcf5e&imgtype=0&src=http%3A%2F%2Fimg.juimg.com%2Ftuku%2Fyulantu%2F110915%2F8880-11091500230568.jpg", "这是猫")],
        ),
      ),
    );
  }
}
